<script setup lang="ts">
// 管理人员首页卡片

const props = defineProps<{
  title: string
  subtitle: string
  icon: string
  badge?: string
}>()
</script>

<template>
  <view class="container" hover-class="tapped">
    <view class="flex flex-col">
      <view class="flex items-center">
        <view class="text-40rpx leading-40rpx text-secondary font-bold">
          {{ props.title }}
        </view>
        <Spacer width="8" />
        <view v-if="badge" class="flex justify-center items-center bg-red rounded-full w-40rpx h-40rpx text-white text-28rpx leading-28rpx">
          {{ badge }}
        </view>
      </view>
      <Spacer height="24" />
      <view class="text-28rpx leading-28rpx text-tertiary">
        {{ props.subtitle }}
      </view>
    </view>
    <image class="w-88rpx h-88rpx" :src="props.icon" />
  </view>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50rpx 44rpx 50rpx 46rpx;
  margin-bottom: 20rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
}

.container.tapped {
  background-color: #F8F8F8;
}
</style>
